<template>
	<!-- 加载中组件 -->
	<uni-load-more :status="isLoadingStatus" v-if="isLoading" />

	<!-- 章节阅读主容器 -->
	<view v-else class="chapter-reader" :class="{ 'night-mode': isNightMode }"
		:style="{ backgroundColor: computedBgColor }" @click="toggleFooterMenu">
		<view class="content-wrapper">
			<swiper easing-function="linear" :vertical="isVertical" class="chapter-swiper" @change="handleSwiperChange"
				:current="activeSlideIndex">
				<swiper-item class="swiper-item" v-for="(pageChapter, index) in pageChapters" :key="index">
					<!-- 使用textarea展示组装后的段落内容 -->
					<textarea class="chapter-textarea" :value="pageChapter"
						:style="{ fontSize: chapterFontSize + 'px' }" maxlength="-1" readonly disabled />

					<!-- 第一个swiper-item的左下角交互区域 -->
					<view v-if="index === 0" class="corner-area corner-left" @click.stop="handleLeftCornerClick"
						@touchstart="handleCornerTouchStart" @touchend="handleLeftCornerTouchEnd">
						<text class="corner-text">上一章</text>
					</view>

					<!-- 最后一个swiper-item的右下角交互区域 -->
					<view v-if="index === pageChapters.length - 1" class="corner-area corner-right"
						@click.stop="handleRightCornerClick" @touchstart="handleCornerTouchStart"
						@touchend="handleRightCornerTouchEnd">
						<text class="corner-text">下一章</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>

	<!-- 底部菜单 - 使用uni-popup从底部弹出 -->
	<uni-popup ref="footerPopup" type="bottom" safe-area="false" :maskClick="true" :isMask="true"
		maskBackgroundColor="transparent" backgroundColor="#fff">
		<view class="footer-popup-header">
			<view @click="navigateToPrevChapter" class="nav-button">
				<text>上一章</text>
			</view>
			<view class="chapter-slider">
				<slider :value="currentChapterIndex+1" min="0" :max="chapterItemList.length-1" block-size="16"
					@change="handleChapterChange" activeColor="#00ff00" backgroundColor="#cacaca" block-color="#8A6DE9"
					show-value />
			</view>
			<view @click="navigateToNextChapter" class="nav-button">
				<text>下一章</text>
			</view>

		</view>
		<view class="footer-popup-footer">
			<!-- 目录按钮 -->
			<view @click="toggleDirectoryPanel" class="footer-button">
				<uni-icons type="wallet" size="30"></uni-icons>
				<text>目录</text>
			</view>
			<!-- 夜间模式按钮 -->
			<view @click="toggleNightMode" class="footer-button">
				<uni-icons type="smallcircle-filled" size="30" v-if="isNightMode"></uni-icons>
				<uni-icons type="star" size="30" v-else></uni-icons>
				<text>{{ isNightMode ? '白天' : '夜间' }}</text>
			</view>
			<!-- 设置按钮 -->
			<view @click="toggleSettingPanel" class="footer-button">
				<uni-icons type="settings" size="30"></uni-icons>
				<text>设置</text>
			</view>
		</view>
	</uni-popup>


	<!-- 设置面板 - 使用uni-popup从底部弹出 -->
	<uni-popup ref="settingPopup" type="bottom" :maskClick="true" :isMask="true" maskBackgroundColor="transparent">
		<view class="setting-panel">
			<!-- 亮度调节 -->
			<view class="setting-item">
				<view>亮度</view>
				<view class="slider-wrapper">
					<slider min="0" max="1" :value="lightness" step="0.05" color="#f5f5f5" activeColor="#4393e2"
						block-size="14" @changing="handleLightnessChange" @change="handleLightnessChange" />
				</view>
				<view>
					<text class="keep-light-text">常亮</text>
					<switch type="checkbox" :checked="isKeepLight" @change="handleScreenLightToggle"></switch>
				</view>
			</view>
			<!-- 字体大小 -->
			<view class="setting-item setting-item--font-size">
				<view>字体</view>
				<view class="slider-wrapper">
					<slider min="12" max="30" :value="chapterFontSize" step="1" color="#f5f5f5" activeColor="#4393e2"
						block-size="14" show-value @change="handleFontSizeChange" />
				</view>
			</view>
			<!-- 翻页 -->
			<view class="setting-item setting-item--paging">
				<view>翻页</view>
				<view class="paging-mode-container">
					<view :class="{ 'active': fanyeType === '上下' }" @click="togglePagingMode('上下')">
						上下
					</view>
					<view :class="{ 'active': fanyeType === '平移' }" @click="togglePagingMode('平移')">
						平移
					</view>
					<view :class="{ 'active': fanyeType === '仿真' }" @click="togglePagingMode('仿真')">
						仿真
					</view>
					<view :class="{ 'active': fanyeType === '覆盖' }" @click="togglePagingMode('覆盖')">
						覆盖
					</view>
					<view :class="{ 'active': fanyeType === '无动画' }" @click="togglePagingMode('无动画')">
						无动画
					</view>
				</view>
			</view>
			<!-- 背景颜色 -->
			<view class="setting-item setting-item--background">
				<view>背景</view>
				<view class="background-color-container">
					<view v-for="(color, index) in backgroundColorList" :key="index" class="background-color-item"
						:style="{ backgroundColor: color }" @click="handleBackgroundColorChange(color, index)"></view>
				</view>
			</view>
		</view>
	</uni-popup>

	<!-- 目录面板 - 使用uni-popup从底部弹出 -->
	<uni-popup ref="directoryPopup" type="bottom" :maskClick="true" :isMask="true" maskBackgroundColor="transparent">
		<view class="directory-panel">
			<!-- 头部：小说信息 -->
			<view class="directory-header">
				<image class="book-cover" :src="bookInfo.image" mode="widthFix" />
				<view class="book-info">
					<text class="book-title">
						{{ bookInfo.name }}
					</text>
					<text class="book-author">{{ bookInfo.author }}</text>
				</view>
			</view>

			<!-- 内容列表 -->
			<view class="directory-content">
				<!-- 目录列表 -->
				<uni-list v-if="currentTab === 'directory'">
					<uni-list-item :key="item.id" v-for="(item, index) in chapterItemList" :title="item.chapterName"
						@tap="navigateToChapterByDirectory(item, index)" class="directory-item" clickable
						hover-class="uni-list-item-hover" />
				</uni-list>
				<!-- 书签列表 -->
				<uni-list v-else>
					<uni-list-item clickable :key="item.id" v-for="(item, index) in bookmMarkItemList"
						:title="item.title" class="directory-item" hover-class="uni-list-item-hover" />
				</uni-list>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	// 导入依赖
	import { listParagraphItemAPI, listChapterItemAPI, getBookInfoByIdAPI, getReadChapterItemAPI, addReadChapterItemAPI } from '@/services/book'
	import { BookItem, BookMarkItem, ChapterItem, ParagraphItem } from '../../types/book'
	import { ref, nextTick } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'

	// 页面状态
	const isLoading = ref(false) // 加载状态
	const isLoadingStatus = ref('more') // 查询状态

	// 目录相关
	const currentTab = ref<'directory' | 'bookmark'>('directory') // 当前选项卡(目录/书签)
	const chapterItemList = ref<ChapterItem[]>([]) // 章节列表数据
	const bookmMarkItemList = ref<BookMarkItem[]>([]) // 书签列表数据

	// 章节内容相关
	const paragraphItemList = ref<ParagraphItem[]>([]) // 段落数据
	const fullChapterText = ref('') // 组装后的完整章节文本
	const currentChapterId = ref(0) // 当前章节ID
	const currentBookId = ref(0) // 当前书籍ID
	const activeSlideIndex = ref(0) // 当前激活的滑动页签索引
	const currentChapterIndex = ref(0) // 当前章节在目录中的索引

	// 阅读设置
	const isNightMode = ref(false) // 是否夜间模式
	const chapterFontSize = ref(16) // 字体大小
	const backgroundColorList = ref<string[]>([]) // 背景色列表
	const computedBgColor = ref() // 当前背景色
	const currentColorIndex = ref(0) // 当前背景色索引
	const lightness = ref(0.5) // 亮度
	const isKeepLight = ref(false) // 是否保持屏幕常亮
	const isVertical = ref(false) // 是否垂直滑动
	const fanyeType = ref('上下') // 翻页方式

	// 面板相关
	const footerPopup = ref<any>() // 底部菜单面板引用
	const directoryPopup = ref<any>() // 目录面板引用
	const settingPopup = ref<any>() // 设置面板引用
	const footerPopupVisible = ref(false) // 底部菜单显示状态
	const directoryPopupVisible = ref(false) // 目录面板显示状态
	const settingPopupVisible = ref(false) // 设置面板显示状态

	// 其他
	const bookInfo = ref<BookItem>({ // 书籍信息
		id: 0,
		name: '',
		image: '',
		author: '',
		currentChapterName: '',
		hot: 0,
		wordCount: 0
	})
	const scrollTop = ref(0) // 滚动位置

	// 滑动相关
	const touchStartX = ref(0) // 触摸起始X坐标
	const touchEndX = ref(0) // 触摸结束X坐标
	const SWIPE_THRESHOLD = 50 // 滑动阈值
	const pageChapters = ref<string[]>([]) // 分页数据

	// 获取父组件参数
	const props = defineProps<{
		bookId : number
	}>()

	// ====================== 生命周期函数 ======================

	/**
	 * 页面加载时执行
	 */
	onLoad(async () => {
		// 设置加载状态
		isLoading.value = true
		isLoadingStatus.value = 'loading'
		// 设置当前书本id
		currentBookId.value = props.bookId
		// 初始化背景颜色
		initBackgroundColorList()
		// 查询书籍信息
		await fetchBookInfo(currentBookId.value)
		// 查询章节数据
		await fetchChapterList(currentBookId.value)
		// 查询阅读章节历史
		await fetchReadChapterHistory(currentBookId.value)
		// 延迟加载完成
		setTimeout(() => {
			isLoading.value = false
			isLoadingStatus.value = 'more'
		}, 100)
	})

	// ====================== 数据获取相关 ======================

	/**
	 * 根据书籍id查询书本信息
	 * @param bookId - 书籍id
	 */
	const fetchBookInfo = async (bookId : number) => {
		await getBookInfoByIdAPI(bookId).then((res) => {
			bookInfo.value = res.data
		})
	}

	/**
	 * 查询章节列表数据
	 * @param bookId - 书籍id
	 */
	const fetchChapterList = async (bookId : number) => {
		await listChapterItemAPI(bookId)
			.then((res) => {
				chapterItemList.value = res.data
			})
	}

	/**
	 * 查询阅读章节历史
	 * @param bookId - 书籍id
	 */
	const fetchReadChapterHistory = async (bookId : number) => {
		await getReadChapterItemAPI(bookId).then((res) => {
			// 更新当前阅读章节
			if (res.data != null) {
				// 查询当前用户阅读的章节历史
				currentChapterIndex.value = res.data.chapterIndex
			} else {
				currentChapterIndex.value = 0
			}
			currentChapterId.value = chapterItemList.value[currentChapterIndex.value].id
			// 查询章节详情
			loadParagraphData()
		})
	}

	/**
	 * 新增阅读章节历史
	 */
	const recordReadChapter = async () => {
		addReadChapterItemAPI(currentBookId.value, currentChapterIndex.value)
	}

	/**
	 * 加载段落数据
	 */
	const loadParagraphData = async () => {
		// 记录阅读章节
		recordReadChapter()
		// 查询段落数据
		listParagraphItemAPI(currentChapterId.value).then((res) => {
			paragraphItemList.value = res.data
			assembleChapterText()
			// 使用nextTick确保DOM更新后再滚动到顶部
			nextTick(() => {
				scrollTop.value = 0
			})
		})
		// 更新标题
		uni.setNavigationBarTitle({ title: chapterItemList.value[currentChapterIndex.value].chapterName })
	}

	/**
	 * 初始化背景颜色列表数据并设置初始背景色
	 */
	const initBackgroundColorList = () => {
		backgroundColorList.value = [
			'#f2f2f2',
			'#f0dbbc',
			'#d8e5cb',
			'#ced7e6',
			'#333'
		]
		computedBgColor.value = backgroundColorList.value[currentColorIndex.value]
	}

	// ====================== 章节内容处理 ======================

	/**
	 * 组装章节文本进行分页
	 */
	const assembleChapterText = () => {
		let text = ''
		paragraphItemList.value.forEach(item => {
			text += item.paragraphContent + '\n\n'
		})
		fullChapterText.value = text

		pageChapters.value = []
		for (let i = 0; i < paragraphItemList.value.length; i += 12) {
			pageChapters.value.push(paragraphItemList.value.slice(i, i + 12).map(item => item.paragraphContent).join('\n\n'))
		}
	}

	// ====================== 章节导航相关 ======================

	/**
	 * 处理swiper滑动变化事件
	 * @param e - swiper变化事件对象
	 */
	const handleSwiperChange = (e : any) => {
		activeSlideIndex.value = e.detail.current
	}

	/**
	 * 跳转到指定章节
	 * @param e - 滑块事件对象
	 */
	const handleChapterChange = (e : any) => {
		const index = e.detail.value
		const item = chapterItemList.value[index]
		navigateToChapterByDirectory(item, index)
	}

	/**
	 * 切换章节
	 * @param direction - 切换方向('prev' 上一章, 'next' 下一章)
	 */
	const switchChapter = (direction : 'prev' | 'next') => {
		if (direction === 'prev') {
			if (currentChapterIndex.value > 0) {
				currentChapterIndex.value--
			} else {
				uni.showToast({
					title: '已经是第一章了',
					icon: 'none'
				})
				return
			}
		} else {
			if (currentChapterIndex.value < chapterItemList.value.length - 1) {
				currentChapterIndex.value++
			} else {
				uni.showToast({
					title: '已经是最后一章了',
					icon: 'none'
				})
				return
			}
		}
		// 更新当前章节id
		currentChapterId.value = chapterItemList.value[currentChapterIndex.value].id
		// 重新加载数据
		loadParagraphData()
	}

	/**
	 * 导航到上一章
	 */
	const navigateToPrevChapter = () => {
		switchChapter('prev')
	}

	/**
	 * 导航到下一章
	 */
	const navigateToNextChapter = () => {
		switchChapter('next')
	}

	/**
	 * 跳转到目录指定章节位置
	 * @param item - 目录项
	 * @param index - 目录索引
	 */
	const navigateToChapterByDirectory = (item : ChapterItem, index : number) => {
		currentChapterIndex.value = index
		currentChapterId.value = item.id
		loadParagraphData()
		directoryPopup.value.close()
		directoryPopupVisible.value = false
	}

	// ====================== 界面交互相关 ======================

	/**
	 * 切换底部菜单显示状态
	 */
	const toggleFooterMenu = () => {
		// 点击页面时，关闭其他面板但保持底部菜单状态
		settingPopup.value?.close()
		settingPopupVisible.value = false
		directoryPopup.value?.close()
		directoryPopupVisible.value = false

		// 切换底部菜单显示状态
		if (footerPopupVisible.value) {
			footerPopup.value.close()
			footerPopupVisible.value = false
		} else {
			footerPopup.value.open()
			footerPopupVisible.value = true
		}
	}

	/**
	 * 切换设置面板显示状态
	 */
	const toggleSettingPanel = () => {
		// 不关闭底部菜单，直接切换设置面板
		directoryPopup.value?.close()
		directoryPopupVisible.value = false

		if (settingPopupVisible.value) {
			settingPopup.value.close()
			settingPopupVisible.value = false
		} else {
			settingPopup.value.open()
			settingPopupVisible.value = true
		}
	}

	/**
	 * 切换目录列表显示状态
	 */
	const toggleDirectoryPanel = () => {
		// 不关闭底部菜单，直接切换目录面板
		settingPopup.value?.close()
		settingPopupVisible.value = false

		// 切换到目录选项卡
		changeTab('directory')
		if (directoryPopupVisible.value) {
			directoryPopup.value.close()
			directoryPopupVisible.value = false
		} else {
			directoryPopup.value.open()
			directoryPopupVisible.value = true
		}
	}

	/**
	 * 切换目录或者书签选项卡
	 * @param tab - 选项卡名称('directory' 目录, 'bookmark' 书签)
	 */
	const changeTab = (tab : string) => {
		currentTab.value = tab as 'directory' | 'bookmark'

		if (tab === 'bookmark') {
			// 查询书签列表数据(待实现)
		} else {
			// 获取目录列表
			fetchChapterList(currentBookId.value)
		}
	}

	// ====================== 设置相关 ======================

	/**
	 * 切换黑夜和白天模式
	 */
	const toggleNightMode = () => {
		isNightMode.value = !isNightMode.value
		computedBgColor.value = isNightMode.value
			? backgroundColorList.value[4]
			: backgroundColorList.value[0]
	}

	/**
	 * 切换背景颜色
	 * @param color - 颜色值
	 * @param index - 颜色索引
	 */
	const handleBackgroundColorChange = (color : string, index : number) => {
		isNightMode.value = index === 4
		computedBgColor.value = color
	}

	/**
	 * 修改屏幕亮度
	 * @param e - 滑块事件对象
	 */
	const handleLightnessChange = (e : any) => {
		lightness.value = e.detail.value
		uni.setScreenBrightness({
			value: lightness.value
		})
	}

	/**
	 * 切换屏幕常亮状态
	 * @param e - 开关事件对象
	 */
	const handleScreenLightToggle = (e : any) => {
		isKeepLight.value = e.detail.value
		uni.setKeepScreenOn({
			keepScreenOn: isKeepLight.value
		})
	}

	/**
	 * 改变字体大小
	 * @param e - 滑块事件对象
	 */
	const handleFontSizeChange = (e : any) => {
		chapterFontSize.value = e.detail.value
		// 使用nextTick确保DOM更新后重新计算分页
		nextTick(() => {
			assembleChapterText()
		})
	}

	/**
	 * 切换翻页模式
	 */
	const togglePagingMode = (type : string) => {
		fanyeType.value = type
		if (type === "上下") {
			isVertical.value = true
		} else if (type === "平移") {
			isVertical.value = false
		} else {
			isVertical.value = false
		}
	}

	// ====================== 角落交互区域相关 ======================

	/**
	 * 角落区域触摸开始事件（左右通用）
	 * @param e - 触摸事件
	 */
	const handleCornerTouchStart = (e : TouchEvent) => {
		touchStartX.value = e.touches[0].clientX
	}

	/**
	 * 右下角区域点击事件
	 */
	const handleRightCornerClick = () => {
		navigateToNextChapter()
		uni.showToast({
			title: '点击了右下角区域',
			icon: 'none'
		})
	}

	/**
	 * 右下角区域触摸结束事件
	 * @param e - 触摸事件
	 */
	const handleRightCornerTouchEnd = (e : TouchEvent) => {
		handleCornerSwipe(e, 'right')
	}

	/**
	 * 左下角区域点击事件
	 */
	const handleLeftCornerClick = () => {
		navigateToPrevChapter()
		uni.showToast({
			title: '点击了左下角区域',
			icon: 'none'
		})
	}

	/**
	 * 左下角区域触摸结束事件
	 * @param e - 触摸事件
	 */
	const handleLeftCornerTouchEnd = (e : TouchEvent) => {
		handleCornerSwipe(e, 'left')
	}

	/**
	 * 处理角落区域滑动事件
	 * @param e - 触摸事件
	 * @param area - 区域位置（left/right）
	 */
	const handleCornerSwipe = (e : TouchEvent, area : 'left' | 'right') => {
		touchEndX.value = e.changedTouches[0].clientX
		const diffX = touchEndX.value - touchStartX.value

		// 向右滑动超过阈值，切换到上一章
		if (diffX > SWIPE_THRESHOLD) {
			navigateToPrevChapter()
			uni.showToast({
				title: `${area === 'left' ? '左下角' : '右下角'}区域右滑切换上一章`,
				icon: 'none'
			})
		}// 向左滑动超过阈值，切换到下一章
		else if (diffX < -SWIPE_THRESHOLD) {
			navigateToNextChapter()
			uni.showToast({
				title: `${area === 'left' ? '左下角' : '右下角'}区域左滑切换下一章`,
				icon: 'none'
			})
		}
	}
</script>
<style lang="scss" scoped>
	// 章节阅读容器
	.chapter-reader {
		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		// 内容包装器
		.content-wrapper {
			width: 95%;
			height: 100%;

			// 章节轮播
			.chapter-swiper {
				height: 100vh;

				// 章节轮播项
				.swiper-item {
					height: 100vh;
					width: 100%;
					position: relative;

					// textarea样式
					.chapter-textarea {
						width: 100%;
						height: 100%;
						background-color: transparent;
						// 字体之间间距
						letter-spacing: 10px;
						// 行之间间距
						line-height: 25px;
					}

					// 角落交互区域基础样式
					.corner-area {
						position: absolute;
						bottom: 40rpx;
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
						background-color: rgba(138, 109, 233, 0.2);
						display: flex;
						justify-content: center;
						align-items: center;
						z-index: 10;
						touch-action: manipulation;
						transition: background-color 0.3s;

						&:hover {
							background-color: rgba(138, 109, 233, 0.3);
						}

						&.corner-left {
							left: 40rpx;
						}

						&.corner-right {
							right: 40rpx;
						}

						.corner-text {
							color: #8A6DE9;
							font-size: 28rpx;
							font-weight: bold;
							text-align: center;
						}
					}
				}
			}
		}

		// 夜间模式样式
		&.night-mode {
			.chapter-textarea {
				color: #fff5f5;
			}

			.footer-popup-footer {
				background-color: #333;
				color: #fff5f5;
			}

			.corner-area {
				background-color: rgba(138, 109, 233, 0.1);

				.corner-text {
					color: #a792f0;
				}

				&:hover {
					background-color: rgba(138, 109, 233, 0.2);
				}
			}
		}
	}

	// 底部菜单弹窗
	.footer-popup-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		height: 50px;
		z-index: 100;

		// 导航按钮
		.nav-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 10px;
			padding: 10px;
			background-color: none;
		}

		// 章节滑块
		.chapter-slider {
			flex: 6;
		}
	}

	// 底部菜单弹窗底部
	.footer-popup-footer {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-around;
		background-color: white;
		height: 60px;
		z-index: 100;

		// 底部菜单项
		.footer-button {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	// 设置面板
	.setting-panel {
		padding: 4px 16px;
		background-color: white;
		height: 25vh;
		z-index: 10;
		margin-bottom: 100px;
		z-index: 99;

		// 设置项
		.setting-item {
			display: flex;
			align-items: center;
			padding: 4px 0;

			&.setting-item--font-size {
				justify-content: flex-start;
			}

			&.setting-item--background {
				align-items: center;
			}

			// 滑块容器
			.slider-wrapper {
				flex: 1;
				margin: 0 8px;
			}

			// 常亮文本
			.keep-light-text {
				margin-right: 10px;
			}

			// 背景颜色容器
			.background-color-container {
				display: flex;
				flex-direction: row;
				flex: 1;
				justify-content: space-around;
				align-items: center;

				// 背景颜色项
				.background-color-item {
					width: 32px;
					height: 32px;
					border-radius: 50%;
				}
			}

			// 翻页模式容器
			.paging-mode-container {
				display: flex;
				flex-direction: row;
				flex: 1;
				justify-content: space-around;
				align-items: center;
				background-color: #eaecef;
				margin: 0 10px;
				border-radius: 10px;
				padding: 10px 0;

				// 翻页模式项 - 激活状态
				.active {
					padding: 0 10px;
					background-color: #ffffff;
					border-radius: 10px;
				}
			}
		}
	}

	// 目录面板
	.directory-panel {
		background-color: white;
		max-height: 70vh;
		z-index: 10;
		margin-bottom: 100px;
		display: flex;
		flex-direction: column;

		// 目录面板头部
		.directory-header {
			display: flex;
			flex-direction: row;
			padding: 15px;
			border-bottom: 1px solid #eee;
			height: 60px;

			.book-cover {
				width: 60px;
				height: 60px;
				border-radius: 4px;
				margin-right: 12px;
			}

			.book-info {
				display: flex;
				flex-direction: column;
				flex: 1;
				justify-content: center;

				.book-title {
					margin-bottom: 4px;
					font-size: 16px;
					font-weight: 600;
				}

				.book-author {
					font-size: 14px;
					color: #4b5563;
				}
			}
		}

		// 目录内容
		.directory-content {
			padding: 15px;
			flex: 1;
			overflow-y: auto;

			// 目录列表项
			.directory-item {
				padding: 4px 0;
				font-size: 14px;
				border-bottom: 1px solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}

	// 翻页模式设置样式
	.setting-item--paging {
		.paging-mode-container {
			display: flex;
			justify-content: space-around;
			width: 100%;

			.paging-mode-item {
				padding: 8px 12px;
				border-radius: 4px;
				transition: all 0.3s ease;
				cursor: pointer;
				font-size: 14px;

				// 默认样式
				background-color: #f0f0f0;
				color: #333;

				// 激活状态样式
				&.active {
					background-color: #4393e2;
					color: white;
					transform: scale(1.05);
					box-shadow: 0 2px 8px rgba(67, 147, 226, 0.4);
				}

				// 悬停效果
				&:hover:not(.active) {
					background-color: #e0e0e0;
				}
			}
		}
	}
</style>